<template>
	<view class="navbar" :style="{height:statusBarHeight+navBareight +'px',background:bgColor||''}">
		<!-- 如若不写 高度始终为44 没有找到原因 -->
		<view class="narbar-flexd">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="narbar-content" :style="{height:navBareight+'px',justifyContent:justCenter?'center':''}">

				<!-- 左侧返回按钮 -->
				<view class="left" @click="onBack" v-if="back">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
				<view class="title">
					{{title||''}}
				</view>
			</view>
		</view>
		<!-- <view class="navHeight" :style="{height:statusBarHeight+navBareight +'px'}"></view> -->
	</view>
</template>

<script>
	export default {
		props: ['title', 'back', "justCenter", "bgColor"],
		data() {
			return {
				statusBarHeight: 20,
				navBareight: 45,
				windowWidth: 375,
			}
		},
		mounted() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
				windowWidth
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.windowWidth = windowWidth
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			//#endif
		},
		methods: {
			// 左侧返回按钮调用
			onBack() {
				let pages = getCurrentPages()
				if (pages && pages.length && pages.length > 1) {
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				} else {
					uni.switchTab({
						url: '/pages/Home/Home'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.narbar-flexd {
		background-size: 100% 100% !important;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;

		.narbar-content {
			padding: 0 15px;
			display: flex;
			box-sizing: border-box;
			align-items: center;

			.logo {
				font-size: 18px;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				color: #323232;
			}

			.left {
				position: absolute;
				// top: 50%;
				left: 5%;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #323232;
			}

		}


	}

	.navHeight {
		height: 60px;
	}
</style>